

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

  
  <div class="row">
  <div class="col-md-2"><img src="images/vet_dog.jpg" class="img-responsive" alt="Responsive image" style="position:relative; top:-25px; height:80px; left:30px;">
	</div>
  <div class="input-group col-md-9">
		<input type="text" id="search"  value="" class="form-control txtSearch" placeholder="Type Patient Information Keyword and Click to View Records">
		<div class="input-group-btn">
		<button type="button" class="btn btn-primary" disabled><span class="glyphicon glyphicon-search"></span></button>
				</div>	
			</div>	
			
	</div>
  

    

	

    
  
<script type="text/javascript">	
	$(document).ready(function(){
		$.ajax({
			url: 'list_patients.php?User_ID=<?php echo $User_ID= trim ($_SESSION['User_ID']); ?>',
			dataType: 'json',
			success: function(result){
				console.log(result);
		
				$( ".txtSearch" ).autocomplete({
				source: result.data,
				select: function(event,ui){
								      		$('.txtSearch').val(ui.item.label);
								      		//$('#btnSearch').click();
								      		window.location.replace(ui.item.href);
								  }			
			}).autocomplete("instance")._renderItem = function(ul,item){
								    	$(ul).addClass('searchWrapUl')
						    			 return $("<li />")
								            .append("<a class='searchResult'><img src='" + "' />" + item.pet_name + "/" + item.pet_type + "/" + item.pet_breed + "/" + item.pet_gender + "/" + item.pet_age + "/" + item.pet_birthday + "/" + item.owner_name + "</a>")
								            .appendTo(ul);
								    };  	
			}
		});	
	});
</script>
